@import './base.less';
@import './common.less';
.banner {
    position: relative;
    height: 342px;
    width: 100%;
    background-color: #1ec0fa;
    overflow: hidden;
    .banner-img {
        width: 100%;
        height: 100%;
        display: block;
    }
    .banner-cloud-shape {
        position: absolute;
        left: 0px;
        bottom: 8px;
        width: 100%;
        display: block;
        z-index: 10;
    }
    .banner-cloud {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        display: block;
        z-index: 30;
    }
    .banner-ad {
        position: absolute;
        left: 50%;
        bottom: 0px;
        margin-left: -330px;
        height: 100%;
        z-index: 20;
        .ad-boxs {
            position: relative;
            width: 181px;
            height: 100%;
            background: url(../images/index-mobile.png) no-repeat center bottom;
            .ad-box {
                position: absolute;
                left: 13px;
                bottom: -52px;
                width: 157px;
                height: 100%;
                overflow: hidden;
            }
        }
    }
    .banner-code {
        position: absolute;
        right: 50%;
        bottom: 0px;
        margin-right: -330px;
        height: 100%;
        z-index: 20;
        .code {
            position: relative;
            width: 320px;
            height: 100%;
            background: url(../images/index-code.png) no-repeat center center;
            text-align: center;
        }
        .code-img {
            position: absolute;
            left: 93px;
            bottom: 97px;
            width: 121px;
            height: 121px;
            background: url(../images/index-ad-code.png) no-repeat center center;
        }
    }
    .banner-ul {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 471px;
        li {
            width: 157px;
            float: left;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.container {
    position: relative;
    width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    .line {
        border-top: 2px solid #e1e1e1;
        position: relative;
        text-align: center;
        margin-top: 38px;
        .title {
            position: absolute;
            z-index: 101;
            background-color: #fff;
            color: #6f7b8d;
            width: 152px;
            left: 50%;
            text-align: center;
            margin-left: -76px;
            top: -16px;
            font-size: 20px;
        }
        h4 {
            margin-top: 20px;
            color: #a7b3c4;
            font-size: 18px;
        }
    }
    .icon-container {
        margin: 65px auto;
        .section {
            position: relative;
            display: inline-block;
            *display: inline;
            zoom: 1;
            width: 166px;
            text-align: center;
            height: 180px;
            .icon {
                position: absolute;
                top: 0px;
                left: 50%;
                cursor: pointer;
                &.icon1 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    width: 84px;
                    height: 82px;
                    margin-left: -42px;
                    background: url(../images/index-icon1.png) no-repeat;
                }
                &.icon2 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    width: 35px;
                    margin-left: -18px;
                    height: 89px;
                    background: url(../images/index-icon2.png) no-repeat;
                }
                &.icon3 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    width: 72px;
                    margin-left: -36px;
                    height: 85px;
                    background: url(../images/index-icon3.png) no-repeat;
                }
                &.icon4 {
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                    width: 98px;
                    margin-left: -49px;
                    height: 82px;
                    background: url(../images/index-icon4.png) no-repeat;
                }
            }
            .section-content {
                position: absolute;
                left: 50%;
                bottom: 0px;
                margin-left: -83px;
                width: 166px;
                text-align: center;
                h3 {
                    font-weight: 400;
                    margin-top: 40px;
                }
                span {
                    color: #acaead;
                    line-height: 38px;
                }
            }
        }
    }
    .main {
        position: relative;
        margin: 0px auto;
        overflow: hidden;
        width: 100%;
        .main-left {
            position: relative;
            float: left;
            width: 568px;
            height: 415px;
            display: inline-block;
            *display: inline;
            zoom: 1;
            background: url(../images/index-pentagon.png) no-repeat center center;
        }
        .main-right {
            position: relative;
            float: right;
            display: inline-block;
            *display: inline;
            zoom: 1;
            width: 532px;
            height: 415px;
            margin-top: 68px;
            .num1 {
                width: 42px;
                height: 26px;
                display: inline-block;
                *display: inline;
                zoom: 1;
                background: url(../images/number.png) 0 0 no-repeat;
            }
            .num2 {
                width: 42px;
                height: 26px;
                display: inline-block;
                *display: inline;
                zoom: 1;
                background: url(../images/number.png) 0 190px;
            }
            .num3 {
                width: 42px;
                height: 26px;
                display: inline-block;
                *display: inline;
                zoom: 1;
                background: url(../images/number.png) 0 138px;
            }
            .num4 {
                width: 42px;
                height: 26px;
                display: inline-block;
                *display: inline;
                zoom: 1;
                background: url(../images/number.png) 0 80px;
            }
            .num5 {
                width: 42px;
                height: 26px;
                display: inline-block;
                *display: inline;
                zoom: 1;
                background: url(../images/number.png) 0 26px;
            }
            p {
                margin: -40px auto 10px 55px;
                line-height: 60px;
                font-size: 16px;
                color: #acaead;
            }
        }
    }
    .app-show {
        position: relative;
        overflow: hidden;
        margin: 50px 0px 70px 0px;
        .app-img {
            width: 200px;
            height: 365px;
            display: inline-block;
            *display: inline;
            zoom: 1;
            margin-right: 25px;
            float: left;
            outline: none;
            border: 0px;
            &.app-1 {
                background: url(../images/app-1.png) no-repeat center center;
                background-size: cover;
            }
            &.app-2 {
                background: url(../images/app-2.png) no-repeat center center;
                background-size: cover;
            }
            &.app-3 {
                background: url(../images/app-3.png) no-repeat center center;
                background-size: cover;
            }
            &.app-4 {
                background: url(../images/app-4.png) no-repeat center center;
                background-size: cover;
            }
            &.app-5 {
                background: url(../images/app-5.png) no-repeat center center;
                background-size: cover;
            }
            &.app-last-img {
                margin-right: 0;
            }
        }
    }
}
